<template>
	<view class="volunteer-all">
		<view class="volunteer-slideshow">
			<!-- 用户名 -->
			<view class="volunteer-top">
				<view class="volunteer-top-left">
					<view class="imagetv">
						<u-avatar :src="imsrc.src"></u-avatar>
					</view>
					<view class="imagetv-text">
						用户名
					</view>
				</view>
				<view class="volunteer-top-right">
					<u-icon class="right-one" name="bell-fill" color="#6b7280" size="40"></u-icon>
					<u-icon class="right-two" name="setting-fill" color="#6b7280" size="40"></u-icon>
				</view>
			</view>
			<!-- 轮播图 -->
			<u-swiper :list="list" class="U-swiper" :height="400"></u-swiper>
			<!-- 按钮 -->
			<view class="volunteer-butt">
				<view class="volunteer-butt-left">
					<u-icon name="plus" color="white"></u-icon>&nbsp;&nbsp;快速加入
				</view>
				<view class="volunteer-butt-right">
					<u-icon name="edit-pen" color="blue"></u-icon>&nbsp;&nbsp;发布活动
				</view>
			</view>
			<!-- 救助行动 -->
			<view class="volunteer-activity">
				<view class="volunteer-activity-text">
					救助行动
				</view>
				<!-- 内容 -->
				<view class="volunteer-activity-content" v-for="(item,index) in newsData">
					<view class="volunteer-activity-content-whole">
						<view class="whole-image">
							<img :src="item.image_url" alt="">
						</view>
						<view class="whole-text">
							<view class="whole-text-demo">
								{{item.dateTitle}}
							</view>
							<view class="whole-text-demo">
								{{item.dateTime}}
							</view>
							<view class="whole-text-demo">
								地点：{{item.datePlace}}
							</view>
							<view class="whole-text-demo">
								活动描述：{{item.dateDescribe}}
							</view>
							<view class="whole-text-demo">
								已等待时间：{{item.dateAwait}}
							</view>
						</view>
					</view>
					<view class="volunteer-activity-content-whole">
						<view class="whole-image">
							<img :src="item.image_url" alt="">
						</view>
						<view class="whole-text">
							<view class="whole-text-demo">
								{{item.dateTitle}}
							</view>
							<view class="whole-text-demo">
								{{item.dateTime}}
							</view>
							<view class="whole-text-demo">
								地点：{{item.datePlace}}
							</view>
							<view class="whole-text-demo">
								活动描述：{{item.dateDescribe}}
							</view>
							<view class="whole-text-demo">
								已等待时间：{{item.dateAwait}}
							</view>
						</view>
					</view>
					<view class="volunteer-activity-content-whole">
						<view class="whole-image">
							<img :src="item.image_url" alt="">
						</view>
						<view class="whole-text">
							<view class="whole-text-demo">
								{{item.dateTitle}}
							</view>
							<view class="whole-text-demo">
								{{item.dateTime}}
							</view>
							<view class="whole-text-demo">
								地点：{{item.datePlace}}
							</view>
							<view class="whole-text-demo">
								活动描述：{{item.dateDescribe}}
							</view>
							<view class="whole-text-demo">
								已等待时间：{{item.dateAwait}}
							</view>
						</view>
					</view>
					<view class="volunteer-activity-content-whole">
						<view class="whole-image">
							<img :src="item.image_url" alt="">
						</view>
						<view class="whole-text">
							<view class="whole-text-demo">
								{{item.dateTitle}}
							</view>
							<view class="whole-text-demo">
								{{item.dateTime}}
							</view>
							<view class="whole-text-demo">
								地点：{{item.datePlace}}
							</view>
							<view class="whole-text-demo">
								活动描述：{{item.dateDescribe}}
							</view>
							<view class="whole-text-demo">
								已等待时间：{{item.dateAwait}}
							</view>
						</view>
					</view>
					<view class="volunteer-activity-content-whole">
						<view class="whole-image">
							<img :src="item.image_url" alt="">
						</view>
						<view class="whole-text">
							<view class="whole-text-demo">
								{{item.dateTitle}}
							</view>
							<view class="whole-text-demo">
								{{item.dateTime}}
							</view>
							<view class="whole-text-demo">
								地点：{{item.datePlace}}
							</view>
							<view class="whole-text-demo">
								活动描述：{{item.dateDescribe}}
							</view>
							<view class="whole-text-demo">
								已等待时间：{{item.dateAwait}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	const newsData = {
		data: {
			image_url: 'https://pic2.zhimg.com/v2-696b347aa5b02a943706d5de13dc6ec1_r.jpg',
			dateTitle: '活动1',
			dateTime: "2023年6月18日01:06:52",
			datePlace: "XXXX小学",
			dateDescribe: "XXXX",
			dateAwait: "01:08:39"
		}
	}
	const imsrc = ref([{
		src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
		text: '用户名'
	}])


	const list = ref([{
			image: 'https://pic2.zhimg.com/v2-696b347aa5b02a943706d5de13dc6ec1_r.jpg',
			title: 'demo1'
		},
		{
			image: 'https://pic4.zhimg.com/v2-883d1e2c086150f6043a1d2020c9c453_r.jpg',
			title: 'demo2'
		},
		{
			image: 'https://pic4.zhimg.com/v2-5290caf1f5c8c270e6da56b0361c9e1b_r.jpg',
			title: 'demo3'
		}
	])
</script>
<style lang="scss" scoped>
	.volunteer-all {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;

		.volunteer-slideshow {
			width: 95%;

			.volunteer-top {
				width: 100%;
				height: 5%;
				margin-bottom: .5rem;
				display: flex;
				justify-content: space-between;

				.volunteer-top-left {
					display: flex;
					align-items: center;
					width: 40%;
					height: 100%;

					::v-deep .u-avatar__img[data-v-33f8f4cb] {
						width: 1.5rem;
						height: 1.5rem;
					}

				}

				.volunteer-top-right {
					display: flex;
					align-items: center;
					height: 100%;

					.right-one {
						margin-right: .5rem;
					}
				}
			}

			.volunteer-butt {
				width: 100%;
				margin-top: 2rem;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.volunteer-butt-left {
					width: 49%;
					color: white;
					border-radius: 5px;
					border: 1px solid blue;
					background-color: blue;
				}

				.volunteer-butt-right {
					width: 49%;
					color: blue;
					border-radius: 5px;
					border: 1px solid blue;
				}
			}

			.volunteer-activity {
				width: 100%;
				margin-top: 2rem;

				.volunteer-activity-text {
					text-align: left;
					font-size: 1.2rem;
				}

				.volunteer-activity-content {
					width: 100%;
					margin-top: 1rem;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-bottom: 5rem;


					.volunteer-activity-content-whole {
						width: 49%;
						border-radius: 6px;
						padding-bottom: .5rem;
						margin-bottom: 1rem;
						background-color: white;
						box-shadow: 0 0px 0 1.5px #e8e8e8;

						.whole-image {
							width: 100%;

							img {
								border-radius: 6px 6px 0 0;
								width: 100%;
								height: 100%;
							}
						}

						.whole-text {
							border-radius: 6px;

							.whole-text-demo {
								padding: 4px 15px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
</style>